<template>
  <div class="message">
    <!--    服务器信息弹出框-->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="710px"
        :before-close="handleClose">
      <div v-if="TaskStatus === 'ssh'">
        <div>用户名：{{ user }}</div>
        <div>密码：{{ userPass }}&nbsp;&nbsp;&nbsp;</div>
        <div>IP：{{ vpsIp }}</div>
      </div>
      <div v-if="TaskStatus === 'firewall'">
        <div>请访问：http://{{ vpsIp }}</div>
        <div>登陆账号：hillstone</div>
        <div>登陆密码：Aa123456</div>
        <div>备注：请您通过浏览器的方式进行访问配置哦</div>
      </div>
      <div v-if="TaskStatus === 'address'">
        <div>请访问：http://{{ vpsIp }}</div>
      </div>
      <div v-if="TaskStatus === 'jiaohuanji'">
        <div>交换机IP地址：{{ vpsIp }}</div>
        <div>交换机连接端口：2000</div>
        <div>连接方式：Telnet</div>
      </div>
      <div v-if="TaskStatus === 'awvs'">
        <div>访问地址：https://{{ vpsIp }}</div>
      </div>
    </el-dialog>
    <!--    服务器信息弹出框-->
    <el-container>
      <el-header>
        <el-row>
          <el-col :xl="20" :lg="18" :md="16">
            <el-menu
                :default-active=this.$route.name
                active-text-color="#0080FF" background-color="#040813" mode="horizontal"
                text-color="#ccc">
              <el-menu-item index="Login" @click="toHome">首页</el-menu-item>
              <el-menu-item index="Task" @click="toTack">竞赛</el-menu-item>
              <el-menu-item index="Message" @click="toMessage">公告</el-menu-item>
              <el-menu-item index="Message" @click="toAutoPage">配置检测</el-menu-item>
            </el-menu>
          </el-col>
          <el-col v-if="auth === 2" :xl="2" :lg="2" :md="2">
            <el-button class="admin" @click="toAdmin">后台管理</el-button>
          </el-col>
          <el-col :xl="2" :lg="2" :md="2">
            <el-button class="logout" @click="quit">退出</el-button>
          </el-col>
        </el-row>

      </el-header>
      <el-main style="min-height: calc(100vh - 60px);color: white">
        <el-row>
          <el-col :offset="2" :span="20">
            <el-button class="goto" @click="returnPack">返回</el-button>
          </el-col>
        </el-row>
        <el-row justify="" type="flex">
          <el-col :offset="2" :span="18"
                  v-loading="loading"
                  element-loading-text="拼命开启环境中..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  style="border:1px solid #08325a;color: white;position: relative;background-color: #0D1927;height: 700px;width: 100%;position:relative;margin-right: 100px">
            <div class="zero-answer-content">题目名称：
              <span>{{ this.title }}</span>
            </div>
            <div v-if="TaskVpsStatus === true" class="zero-vps" style="display: none;">
              <h3>环境销毁时间：{{ Expiration }}</h3>
            </div>
            <div class="zero-answer-content" style="display: none">创建时间：
              <span>{{ this.CreatedAt }}</span>
            </div>
            <div class="zero-answer-content markdown-body">
              <VueMarkdown :source="content"></VueMarkdown>
              <!--              <span>{{ this.content }}</span>-->
            </div>
            <div v-if="TaskStatus === 'ordinary'">
              <div class="zero-answer-content" v-if="file !== '暂无'">附件：
                <el-button class="admin" @click="downFile">下载附件</el-button>
              </div>
              <div class="zero-answer-content" v-else>附件：
                <span>暂无</span>
              </div>
            </div>
            <div v-if="TaskStatus === 'ssh'" class="zero-answer-content">
              题目场景：
              <el-button :disabled="TaskVpsStatus" element-loading-text="正在创建远程服务器" class="vps"
                         @click="OpenVps">点击获取场景
              </el-button>
              <el-button v-if="TaskVpsStatus === true" class="vps" @click="dialogVisible = true">查看信息</el-button>
            </div>
            <div v-if="TaskStatus === 'firewall'" class="zero-answer-content">
              题目场景：
              <el-button :disabled="TaskVpsStatus" element-loading-text="正在创建远程服务器" class="vps"
                         @click="OpenVps">点击获取场景
              </el-button>
              <el-button v-if="TaskVpsStatus === true" class="vps" @click="dialogVisible = true">查看信息</el-button>
              <div v-if="TaskVpsStatus === true" style="display:inline-block;margin-left: 5px">
                <el-button v-if="autoWeb === true" class="vps" @click="AuthWeb">验证防火墙策略</el-button>
              </div>
            </div>
            <div v-if="TaskStatus === 'address'" class="zero-answer-content">
              题目场景：
              <el-button :disabled="TaskVpsStatus" element-loading-text="正在创建远程服务器" class="vps"
                         @click="OpenVps">点击获取场景
              </el-button>
              <el-button v-if="TaskVpsStatus === true" class="vps" @click="dialogVisible = true">查看信息</el-button>
              <div v-if="TaskVpsStatus === true" style="display:inline-block;margin-left: 5px">
                <el-button v-if="autoWeb === true" class="vps" @click="AuthWeb">验证防火墙策略</el-button>
              </div>
            </div>
            <div v-if="TaskStatus === 'jiaohuanji'" class="zero-answer-content">
              题目场景：
              <el-button :disabled="TaskVpsStatus" element-loading-text="正在创建远程服务器" class="vps"
                         @click="OpenVps">点击获取场景
              </el-button>
              <el-button v-if="TaskVpsStatus === true" class="vps" @click="dialogVisible = true">查看信息</el-button>
              <div v-if="TaskVpsStatus === true" style="display:inline-block;margin-left: 5px">
                <el-button v-if="autoWeb === true" class="vps" @click="AuthWeb">验证防火墙策略</el-button>
              </div>
            </div>
            <div v-if="TaskStatus === 'awvs'" class="zero-answer-content">
              题目场景：
              <el-button :disabled="TaskVpsStatus" element-loading-text="正在创建远程服务器" class="vps"
                         @click="OpenVps">点击获取场景
              </el-button>
              <el-button v-if="TaskVpsStatus === true" class="vps" @click="dialogVisible = true">查看信息</el-button>
              <div v-if="TaskVpsStatus === true" style="display:inline-block;margin-left: 5px">
                <el-button v-if="autoWeb === true" class="vps" @click="AuthWeb">验证防火墙策略</el-button>
              </div>
            </div>
            <div v-if="answer === 0" class="zero-answer-content" style="text-align: center;">
              <el-form :inline="true" :model="flagList"
                       style="width: 500px;position:absolute;bottom: 10px;left: calc(50% - 250px)">
                <el-input v-model="flagList.flag" placeholder="flag{  }"></el-input>
                <el-form-item>
                  <el-button class="vps" style="margin-top: 30px" @click="Submit">提交</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div v-else class="zero-answer-content" style="text-align: center;position: relative">
              <div style="width: 500px;position: absolute;top: 300px;left: calc(50% - 250px);">
                <el-button class="button-answer" style="margin-top: 30px" @click="out">本题已完成</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  name: "message",
  components: {
    VueMarkdown // 注入组件
  },
  data() {
    return {
      auth: 0,
      val: this.$route.query.val,
      CreatedAt: '',
      title: '',
      content: '',
      file: '暂无',
      flagList: {
        flag: ''
      },
      submit: '提交',
      answer: 0,
      TaskStatus: '',
      vpsType: '',
      loading: false,
      TaskVpsStatus: false,
      dialogVisible: false,
      // 服务器信息：
      user: '',
      userPass: '',
      vpsIp: '',
      Expiration: '',
      EcsID: '',
      autoWeb: '',
    }
  },
  mounted() {
    // 格式化时间
    function formatDate(date) {
      let d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear(),
          hour = d.getHours(),
          minute = d.getMinutes();
      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;
      let yearTime = [year, month, day].join('-')
      let dayTime = [hour, minute].join(':')
      return yearTime + " " + dayTime;
    }

    // 验证登录状态
    this.$axios2.post('/login').then((res) => {
      let code = res.data.code
      if (code === 200) {
        this.$axios2.post('/auth').then((res) => {
          let code = res.data.code
          if (code === 2) {
            this.auth = 2
          }
        })
      } else {
        this.$router.push({name: "Login"})
      }
    })
    // 请求后端数据
    this.$axios2.post("/task/info", {
      "title": this.val
    }).then((res) => {
      let data = res.data.TaskInfo
      this.title = data.title
      this.CreatedAt = formatDate(data.CreatedAt)
      this.content = "题目描述：" + data.content
      this.answer = res.data.answer
      this.TaskStatus = data.category
      this.vpsType = data.topicEnvironment
      // 判断是否为实操题
      if (this.TaskStatus === 'firewall') {
        this.$axios2.post('/vpsInfo', {
          'taskName': this.val,
          'topicEnvironment': this.vpsType
        }).then((res) => {
          let code = res.data.code
          if (code === 200) {
            this.user = res.data.userName
            this.userPass = res.data.passWord
            this.vpsIp = res.data.ip
            this.Expiration = formatDate(res.data.Expiration)
            this.EcsID = res.data.EcsID
            this.autoWeb = res.data.autoWeb
            let newDate = new Date().getTime()
            if (newDate > new Date(this.Expiration).getTime()) {
              console.log("服务器已过期")
            } else {
              this.TaskVpsStatus = true
            }
          } else {
            this.TaskVpsStatus = false
          }
        })
      } else if (this.TaskStatus === 'ssh') {
        this.$axios2.post('/vpsInfo', {
          'taskName': this.val,
          'topicEnvironment': this.vpsType
        }).then((res) => {
          let code = res.data.code
          console.log(res)
          if (code === 200) {
            this.user = res.data.userName
            this.userPass = res.data.passWord
            this.vpsIp = res.data.ip
            this.Expiration = formatDate(res.data.Expiration)
            this.EcsID = res.data.EcsID
            let newDate = new Date().getTime()
            if (newDate > new Date(this.Expiration).getTime()) {
              console.log("服务器已过期")
            } else {
              this.TaskVpsStatus = true
            }
          } else {
            this.TaskVpsStatus = false
          }
        })
      } else if (this.TaskStatus === 'jiaohuanji') {
        this.$axios2.post('/vpsInfo', {
          'taskName': this.val,
          'topicEnvironment': this.vpsType
        }).then((res) => {
          let code = res.data.code
          console.log(res)
          if (code === 200) {
            this.user = res.data.userName
            this.userPass = res.data.passWord
            this.vpsIp = res.data.ip
            this.Expiration = formatDate(res.data.Expiration)
            this.EcsID = res.data.EcsID
            let newDate = new Date().getTime()
            if (newDate > new Date(this.Expiration).getTime()) {
              console.log("服务器已过期")
            } else {
              this.TaskVpsStatus = true
            }
          } else {
            this.TaskVpsStatus = false
          }
        })
      } else if (this.TaskStatus === 'address') {
        this.$axios2.post('/vpsInfo', {
          'taskName': this.val,
          'topicEnvironment': this.vpsType
        }).then((res) => {
          let code = res.data.code
          console.log(res)
          if (code === 200) {
            this.user = res.data.userName
            this.userPass = res.data.passWord
            this.vpsIp = res.data.ip
            this.Expiration = formatDate(res.data.Expiration)
            this.EcsID = res.data.EcsID
            let newDate = new Date().getTime()
            if (newDate > new Date(this.Expiration).getTime()) {
              console.log("服务器已过期")
            } else {
              this.TaskVpsStatus = true
            }
          } else {
            this.TaskVpsStatus = false
          }
        })
      }else if (this.TaskStatus === 'awvs') {
        this.$axios2.post('/vpsInfo', {
          'taskName': this.val,
          'topicEnvironment': this.vpsType
        }).then((res) => {
          let code = res.data.code
          console.log(res)
          if (code === 200) {
            this.user = res.data.userName
            this.userPass = res.data.passWord
            this.vpsIp = res.data.ip
            this.Expiration = formatDate(res.data.Expiration)
            this.EcsID = res.data.EcsID
            let newDate = new Date().getTime()
            if (newDate > new Date(this.Expiration).getTime()) {
              console.log("服务器已过期")
            } else {
              this.TaskVpsStatus = true
            }
          } else {
            this.TaskVpsStatus = false
          }
        })
      }else if (this.TaskStatus === 'ordinary') {
        if (data.file === "") {
          this.file = '暂无'
        } else {
          this.file = "/upload/" + data.file
        }
      }
    })
  },
  methods: {
    out() {
      this.$message({
        message: '本题已完成！请继续答题。',
        type: 'success'
      });
    },
    quit() {
      this.$axios2.post('/quit').then((res) => {
        this.$message({
          message: res.data.msg,
          type: 'success'
        });
        this.$router.replace('/')
      })
    },
    toAdmin() {
      this.$router.push('/admin/dash')
    },
    toHome() {
      this.$router.push('/').catch(err => {
        err
      })
    },
    toTack() {
      this.$router.push('/task').catch(err => {
        err
      })
    },
    toMessage() {
      this.$router.push('/message').catch(err => {
        err
      })
    },
    returnPack() {
      this.$router.go(-1)
    },
    downFile() {
      window.open(this.file, '_blank')
    },
    Submit() {
      this.$axios2.post('/task/answer', {
        'title': this.title,
        'flag': this.flagList.flag
      }).then((res) => {
        let code = res.data.code
        if (code === 1007) {
          this.$message.error('Flag错误，再接再厉！');
        } else if (code === 1005) {
          this.$message({
            message: '本题已完成，请继续下道题',
            type: 'warning'
          });
        } else if (code === 200) {
          this.$message({
            message: '恭喜你，完成本题！',
            type: 'success'
          });
          setTimeout(()=>{
            this.$router.go(0)
          },3000)
        }
      })
    },
    // 开启虚拟场景
    OpenVps() {
      this.loading = true
      this.$axios2.post('/openVps', {
        'taskName': this.val,
        'topicEnvironment': this.vpsType
      }).then(() => {
        this.loading = false
        this.$message.success('服务器开通成功')
        this.$router.go(0)
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    toAutoPage() {
      this.$router.push('/autoweb')
    },
    AuthWeb() {
      this.$axios2.post('/autoweb', {
        'url': this.vpsIp
      }).then((res) => {
        let code = res.data.code
        if (code === 200) {
          this.$alert(res.data.flag, '恭喜！', {
            confirmButtonText: '确定',
          });
        } else {
          this.$message.error('检测失败，请重新尝试一次或检查策略！');
        }
      })
    }
    // 延长服务器使用时间
    // extendTime() {
    //   this.$axios2.post('/extendTime', {
    //     'EcsID': this.EcsID
    //   }).then((res) => {
    //     let code = res.data.code
    //     if (code === 200) {
    //       this.$message({
    //         message: '延时成功，手动刷新查看最新销毁时间！',
    //         type: 'success'
    //       });
    //     } else {
    //       this.$message.error("服务错误，请联系管理员！")
    //     }
    //   })
    // }
  }
}
</script>

<style scoped>
.task {
  background-color: #040813;
  min-height: calc(100vh);
  color: white;
}

/deep/ .el-input__inner {
  background-color: #0D1927;
  border: 1px solid #0080ff;
  color: white;
}

/deep/ .el-input__inner:hover {
  background-color: #0D1927;
  border: 1px solid #00e7ff;
  color: white;
}

/deep/ .el-dialog__title {
  color: white;
}

/deep/ .el-dialog__body {
  color: white;
}

/deep/ .el-dialog {
  height: 200px
}

/deep/ .el-dialog, .el-pager li {
  background: url("~@/assets/dialog-background.png") !important;
  color: white;
}

.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover {
  background: #868686;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.zero-answer-content {
  margin-left: 20px;
  margin-top: 30px;
}

.goto {
  margin: 15px 0;
  width: 110px;
  border: none;
  font-size: 14px;
  padding-left: 55px;
  height: 48px;
  background: url("~@/assets/button.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.goto:hover {
  margin: 15px 0;
  width: 110px;
  border: none;
  font-size: 14px;
  padding-left: 55px;
  height: 48px;
  background: url("~@/assets/button.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.logout {
  margin: 15px 0;
  width: 110px;
  border: none;
  font-size: 14px;
  margin-left: 20px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/button-left.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.logout:hover {
  margin: 15px 0;
  margin-left: 20px;
  width: 110px;
  border: none;
  font-size: 14px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/button-left.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.admin {
  width: 110px;
  border: none;
  font-size: 14px;
  margin: 15px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/admin-button.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.admin:hover {
  width: 110px;
  border: none;
  font-size: 14px;
  margin: 15px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/admin-button.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.vps {
  width: 220px;
  border: none;
  font-size: 14px;
  height: 42px;
  background: url("~@/assets/button1.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.vps:hover {
  width: 220px;
  border: none;
  font-size: 14px;
  height: 42px;
  background: url("~@/assets/button1.png");
  background-size: 100%, 100%;
  color: #0080FF;
}

.vps:focus {
  width: 220px;
  border: none;
  font-size: 14px;
  height: 42px;
  background: url("~@/assets/button1.png");
  background-size: 100%, 100%;
  color: #ccc;
}


.button-answer {
  width: 220px;
  border: none;
  font-size: 14px;
  height: 42px;
  background: url("~@/assets/button-answer.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.button-answer:hover {
  width: 220px;
  border: none;
  font-size: 14px;
  height: 42px;
  background: url("~@/assets/button-answer.png");
  background-size: 100%, 100%;
  color: #0080FF;
}

.button-answer:focus {
  width: 220px;
  border: none;
  font-size: 14px;
  height: 42px;
  background: url("~@/assets/button-answer.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.zero-vps {
  position: absolute;
  left: 900px;
  top: 10px;
}

.el-loading-mask {
  background-color: #0D1927;
}

.zero-content {
  width: calc(100% - 50px);
  display: inline-block;
}

.markdown-body {
  color: white;
}
</style>